<template>
	<view class="container">
		<view class="header-wrap">
			<text class="title">商圈列表</text>
			<view class="filter" @click="onOpen()">
				<uni-icons type="settings" size="24"></uni-icons>
				<text>筛选</text>
			</view>
			<!-- <view class="history" @click="onHistory()">
				<uni-icons type="calendar" color="white" size="26"></uni-icons>
				<text>历史记录</text>
			</view> -->
		</view>

		<view class="content-wrap">
			<view class="item" v-for="item in useDataResult.dataList">
				<text class="no">商圈编号：{{ item.groupNo }}</text>
				<view class="line"></view>
				<text class="title">商圈名称：{{ item.groupName }}</text>
				<view class="number">
					<text class="total-num">商圈所属机构：{{ item.agentNo }}</text>
					<!-- <text>类型名称： {{ item.no2 }}</text> -->
					<view class="info" @tap="onDetail(item)">商户管理</view>
				</view>
				<view class="number">
					<text v-if="item.groupType === 0" class="time">类型名称：商业综合体</text>
					<text v-if="item.groupType === 1" class="time">类型名称：商务综合体</text>
					<text v-if="item.groupType === 2" class="time">类型名称：生活综合体</text>
					<text v-if="item.groupType === 3" class="time">类型名称：菜市场</text>
					<text v-if="item.groupType === 4" class="time">类型名称：批发市场</text>
				</view>
			</view>
		</view>

		<gzListNull :list="useDataResult.dataList"></gzListNull>

		<uni-popup ref="searchPopup" type="top">
			<view class="popup-content">
				<view class="item">
					<text>商圈编号</text>
					<input class="input" placeholder-style="color:#BBBBBB" placeholder="请输入商圈编号" v-model="vdata.queryParams.groupNo" />
				</view>
				<view class="item">
					<text>商圈名称</text>
					<input class="input" placeholder-style="color:#BBBBBB" placeholder="请输入商圈名称" v-model="vdata.queryParams.groupName" />
				</view>
				<view class="item">
					<text>商圈类型</text>
					<picker class="input" @change="($e) => bindPickerChange($e,'groupType')" range-key="groupTypeName" :value="vdata.queryParams.groupType" :range="vdata.groupTypeRange">
						<view v-if="vdata.queryParams.groupType === ''" style="color: #bbb;" class="uni-input">请选择类型</view>
						<view v-else class="uni-input">{{vdata.groupTypeRange[vdata.queryParams.groupType].groupTypeName}}</view>
					</picker>
				</view>
				<view class="item">
					<text>归属机构</text>
					<input class="input" placeholder-style="color:#BBBBBB" placeholder="请输入机构号" v-model="vdata.queryParams.agentNo" />
					<!-- <picker class="input" @change="($e) => bindPickerChange($e,'agentIndex')" range-key="agentName" :value="vdata.queryParams.agentIndex" :range="vdata.agentRange">
						<view v-if="!vdata.queryParams.agentIndex" style="color: #bbb;" class="uni-input">请选择机构</view>
						<view v-else class="uni-input">{{vdata.agentRange[vdata.queryParams.agentIndex].agentName}}</view>
					</picker> -->
				</view>
				<view class="bottom-wrap">
					<text class="reset" @click="onReset">重置</text>
					<text class="query" @click="onQuery">查询</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { reactive, ref } from 'vue'
	import { $groupList } from '@/http/marketing/apiMarketing.js'
	import useGetList from '@/hooks/useGetList.js'

	const { useDataResult, getList } = useGetList($groupList, data => data, {})

	// 筛选弹窗
	const searchPopup = ref()
	// 数据源
	const vdata = reactive({
		queryParams: { // 筛选
			groupNo: '',
			agentNo: '',
			groupName: '',
			groupType: ''
		},
		groupTypeRange: [
			{ groupTypeName: '商业综合体', groupType: 0 },
			{ groupTypeName: '商务综合体', groupType: 1 },
			{ groupTypeName: '生活综合体', groupType: 2 },
			{ groupTypeName: '菜市场', groupType: 3 },
			{ groupTypeName: '批发市场', groupType: 4 },
		],
		// agentRange: [
		// 	{ agentNo: 41000000, agentName: '郑州市' },
		// 	{ agentNo: 41000001, agentName: '洛阳市' },
		// ],
	})
	/**
	 * 下拉切换
	 */
	const bindPickerChange = (e, type) => {
		if (e.detail.value !== vdata.queryParams[type]) {
			vdata.queryParams[type] = e.detail.value - 0
		}
	}
	/**
	 * 打开弹窗
	 */
	const onOpen = () => {
		searchPopup.value.open();
	}
	/**
	 * 筛选
	 */
	const onQuery = () => {
		getList(vdata.queryParams)
		onClose()
	}
	/**
	 * 重置
	 */
	const onReset = () => {
		vdata.queryParams = {
			groupNo: '',
			agentNo: '',
			groupName: '',
			groupType: ''
		}
	}
	/**
	 * 关闭弹窗
	 */
	const onClose = () => {
		searchPopup.value.close();
	}
	/**
	 *  详情
	 */
	const onDetail = (item) => {
		getApp().preventActive(()=>{
			uni.navigateTo({
				url: '/marketing/downtown/mch?groupInfo=' + JSON.stringify(item)
			})
		})
		
	}
</script>

<style lang="less">
	@page-backgroud: #F6F7FC;

	.container {
		min-height: 100vh;
		box-sizing: border-box;
		padding: 30rpx 20rpx 30rpx 20rpx;
		background: @page-backgroud;
		overflow: hidden;

		.header-wrap {
			width: 100%;
			position: fixed;
			height: 120rpx;
			top: 0;
			left: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			z-index: 2;
			box-sizing: border-box;
			padding: 0 30rpx;
			background-color: @page-backgroud;

			.title {
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				font-style: normal;
				flex-grow: 1;
			}


			.filter {
				display: flex;
				align-items: center;
				border-radius: 40rpx;
				margin-right: 20rpx;
				background-color: white;
				padding: 8rpx 20rpx;
				border: 1rpx solid #C8C8C8;

				text {
					font-size: 26rpx;
					color: black;
					letter-spacing: 1px;
					margin-bottom: 2rpx;
				}
			}

			.history {
				display: flex;
				align-items: center;
				border-radius: 40rpx;
				background-color: #24C789;
				padding: 8rpx 20rpx;

				text {
					font-size: 26rpx;
					color: #FFFFFF;
					letter-spacing: 1px;
					margin-bottom: 1rpx;
				}
			}
		}

		.content-wrap {
			width: 100%;
			margin-top: 100rpx;
			position: relative;
			z-index: 0;

			.item {
				box-sizing: border-box;
				padding: 30rpx;
				background: #fff;
				border-radius: 20rpx;
				box-shadow: 0rpx -10rpx 30rpx -30rpx rgba(0, 0, 0, 0.8);
				display: flex;
				flex-direction: column;
				margin-bottom: 30rpx;


				.no {
					font-size: 26rpx;
					color: #333333;
				}

				.line {
					height: 1rpx;
					background-color: #E6E6E6;
					margin: 20rpx 0rpx;
				}

				.title {
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
					margin: 15rpx 0rpx;
				}

				.number {
					display: flex;
					align-items: center;
					color: darkgray;
					font-size: 26rpx;
					margin: 5rpx 0rpx;

					.total-num {
						// margin-right: 50rpx;
						flex-grow: 1;
					}

					.time {
						flex-grow: 1;
					}

					.info {
						border: 1rpx solid #24C789;
						border-radius: 35rpx;
						background-color: white;
						padding: 15rpx 30rpx;
						color: #24C789;
						box-shadow: 0rpx -10rpx 30rpx -30rpx rgba(0, 0, 0, 0.8);
					}
				}

			}
		}

		.popup-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 40rpx 30rpx;
			font-size: 26rpx;
			background-color: white;
			border-radius: 0 0 20rpx 20rpx;
			letter-spacing: 1px;
			box-sizing: border-box;
			margin-top: 120rpx;

			.item {
				display: flex;
				flex-direction: column;
				font-size: 28rpx;
				margin-bottom: 30rpx;
				width: 100%;

				.input {
					border-radius: 40rpx;
					padding: 18rpx 30rpx;
					background-color: #F6F7FC;
					margin-top: 20rpx;
					font-size: 30rpx;
				}

			}


			.bottom-wrap {
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: 30rpx;
				margin-top: 30rpx;
				margin-bottom: 10rpx;
				width: 100%;

				.reset {
					color: black;
					border-radius: 40rpx;
					width: 25%;
					padding: 18rpx 0rpx;
					background-color: #F4F5F5;
					text-align: center;
					margin-right: 30rpx;
				}

				.query {
					color: white;
					border-radius: 40rpx;
					width: 75%;
					padding: 18rpx 0rpx;
					background-color: #24C789;
					margin-top: 30rpx;
					text-align: center;
					margin-bottom: 10rpx;
				}
			}

		}

	}
</style>